<template>
  <div class="model-container">
    <div style="background-color: white">
      <div class="listName">
        <div>
          <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
          <el-button :disabled="disableIinput" size="small" type="success" plain @click="submitForm">保存</el-button>
          <!--<el-button :disabled="disableIinput" size="small" type="warning" plain @click="resetForm">重置</el-button>-->
        </div>
      </div>

      <el-tabs v-model="activeName" class="tabStyle">
        <el-tab-pane name="goodsinfor" label="商品信息">
          <goodsinfor ref="goodsinfor" :type="type" :editor-data="editorData" @submitType="goodsinforType"/>
        </el-tab-pane>
        <el-tab-pane name="goodsclass" label="商品分类">
          <goodsclass ref="goodsclass" :type="type" :editor-data="editorData" @goodclassSuccess="goodclass"/>
        </el-tab-pane>
        <el-tab-pane name="goodsimg" label="商品图片">
          <goodsimg ref="goodsimg" :type="type" :editor-data="editorData" @emitSuccess="goodImg"/>
        </el-tab-pane>
        <el-tab-pane name="gooddescribe" label="商品描述">
          <gooddescribe ref="gooddescribe" :type="type" :editor-data="editorData" @gooddescribe="gooddescribefun"/>
        </el-tab-pane>
        <el-tab-pane name="skuinfor" label="SKU信息">
          <skuinfor ref="skuinfor" :type="type" :editor-data="editorData" @skusubmitType="skuinforType"/>
        </el-tab-pane>
        <el-tab-pane name="associatedgoods" label="关联商品">
          <associatedgoods ref="associatedgoods" :type="type" :editor-data="editorData" @submitassociatedgoods="associatedgoodsData"/>
        </el-tab-pane>

        <!--<el-tab-pane name="associatedgoods1" label="商品类型">
          <associatedgoods1 ref="associatedgoods1" :type="type" :editor-data="editorData" @submitassociatedgoods="associatedgoodsData"/>
        </el-tab-pane>-->
      </el-tabs>
    </div>
    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="30%"/>
  </div>
</template>

<script>
import * as commodity from '../../api/commodity'
import goodsinfor from '../../views/commodity/component/commodity_infor'
import goodsclass from '../../views/commodity/component/goodsclass'
import goodsimg from '../../views/commodity/component/commodity_img'
import gooddescribe from '../../views/commodity/component/commodity_describe'
import skuinfor from '../../views/commodity/component/skuinfor'
import associatedgoods from '../../views/commodity/component/associated_goods'
import associatedgoods1 from '../../views/commodity/component/associated_goods1'
import { getUserInformation } from '../../utils/auth'

export default {
  components: { goodsinfor, goodsclass, goodsimg, gooddescribe, skuinfor, associatedgoods },
  data() {
    return {
      dialogTitle: '弹框',
      dialogState: false,
      goodsinforSubmit: null,
      skuinforSubmit: null,
      activeName: 'goodsinfor',
      // 类型
      type: '',
      // 编辑数据
      editorData: null,
      // 禁用
      disableIinput: false,
      itemCatIds: [],
      description: '',
      // 商品信息数据
      dialogBindData: null,
      // 商品分类数据
      goodClassBinData: null,
      // 商品描述数据
      goodDescribeBinData: null,
      // 商品图片数据
      goodImgBinData: [],
      defaultPicUrl: '',
      itemVideoPics: [],
      // 商品SKU数据
      goodSkuBinData: null,
      skuRadionData: null,
      skuYesArr: [],
      // 关联数据
      goodAssocBinData: null,
      // 判断是否非销售属性
      isYesorNo: ''
    }
  },
  computed: {

  },
  beforeMount() {
    this.type = this.$route.params.type // 类型
    this.editorData = this.$route.params.data // 编辑数据
    if (this.type === undefined || this.type === null) {
      this.$router.go(-1)
    } else {
      if (this.type === 3) {
        this.disableIinput = true
      }
      if (this.type === 4) {
        this.activeName = this.$route.params.associatedgoods
      }
    }
  },
  methods: {
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    // 保存
    submitForm() {
      this.$refs.associatedgoods.incrementTotal()
      this.$refs.goodsinfor.incrementTotal()
      this.$refs.goodsclass.incrementTotal()
      this.$refs.gooddescribe.goodDescription()
      this.$refs.skuinfor.incrementTotal()
      this.$refs.goodsimg.incrementTotal()
      this.goodsinforSubmit // 判断商品信息
      this.goodClassBinData // 判断商品分类
      this.defaultPicUrl // 判断商品图片
      this.goodImgBinData
      this.goodDescribeBinData // 判断商品描述
      this.isYesorNo // sku

      if (!this.goodsinforSubmit) {
        this.$message({
          message: '请完善商品信息',
          type: 'warning'
        })
        this.activeName = 'goodsinfor'
        return false
      }
      if (this.goodClassBinData.length <= 0) {
        this.$message({
          message: '请选择商品分类',
          type: 'warning'
        })
        this.activeName = 'goodsclass'
        return false
      }
      if (this.defaultPicUrl === 'noImg' || this.goodImgBinData === 'noImg') {
        this.$message({
          message: '请选择主图和详情图',
          type: 'warning'
        })
        this.activeName = 'goodsimg'
        return false
      }
      if (this.goodDescribeBinData.mdescription === '') {
        this.$message({
          message: '请输入移动端商品描述',
          type: 'warning'
        })
        this.activeName = 'gooddescribe'
        return false
      }
      if (this.isYesorNo === 'no') {
        if (!this.skuinforSubmit) {
          this.activeName = 'skuinfor'
          return false
        }
      }
      if (this.isYesorNo === 'yes') {
        if (this.skuYesArr[0] === undefined) {
          this.$message({
            message: '请选择销售属性',
            type: 'warning'
          })
          this.activeName = 'skuinfor'
          return false
        }
      }
      this.addGoos()
      // this.$refs.associatedgoods.incrementTotal()
      // this.$refs.goodsinfor.incrementTotal()
      // this.$refs.gooddescribe.goodDescription()
      // this.$refs.skuinfor.incrementTotal()
      // this.$refs.goodsimg.incrementTotal()
      // if (this.isYesorNo === 'yes') {
      //   if (this.goodsinforSubmit &&
      //     this.defaultPicUrl !== 'noImg' &&
      //     this.goodImgBinData !== 'noImg') {
      //     this.addGoos()
      //   } else {
      //     if (!this.goodsinforSubmit) {
      //       this.activeName = 'goodsinfor'
      //     }
      //   }
      // } else if (this.isYesorNo === 'no') {
      //   if (this.goodsinforSubmit &&
      //     this.skuinforSubmit &&
      //     this.defaultPicUrl !== 'noImg' &&
      //     this.goodImgBinData !== 'noImg') {
      //     this.addGoos()
      //   } else {
      //     if (!this.goodsinforSubmit) {
      //       this.activeName = 'goodsinfor'
      //     } else if (!this.skuinforSubmit) {
      //       this.activeName = 'skuinfor'
      //     }
      //   }
      // }
    },
    addGoos() {
      const param = {
        itemTitle: this.dialogBindData.itemTitle,
        itemSubTitle: this.dialogBindData.itemSubTitle,
        brandId: this.dialogBindData.brandId,
        // brandName: this.dialogBindData.brandName,
        // sellerId: this.dialogBindData.sellerId,
        sellerItemNo: this.dialogBindData.sellerItemNo,
        currency: 'RMB',
        marketPrice: this.dialogBindData.marketPrice,
        wholesalePrice: this.dialogBindData.wholesalePrice,
        originPlace: this.dialogBindData.originPlace,
        unit: this.dialogBindData.unit,
        seoKeyword: this.dialogBindData.seoKeyword,
        seoTitle: this.dialogBindData.seoTitle,
        seoDescription: this.dialogBindData.seoDescription,
        isWebMallItem: this.dialogBindData.isWebMallItem,
        isMobileMallItem: this.dialogBindData.isMobileMallItem,
        isNew: this.dialogBindData.isNew,
        isSellingHot: this.dialogBindData.isSellingHot,
        isGift: this.dialogBindData.isGift,
        isForbidAirCargo: this.dialogBindData.isForbidAirCargo,
        isSpecialLiquid: this.dialogBindData.isSpecialLiquid,
        isFresh: this.dialogBindData.isFresh,
        isSuppVatReceipt: this.dialogBindData.isSuppVatReceipt,
        isImported: this.dialogBindData.isImported,
        isCrossBorderEc: this.dialogBindData.isCrossBorderEc,
        tariffNo: this.dialogBindData.tariffNo,
        taxRate: this.dialogBindData.taxRate,
        language: 'zh_CN',
        memo: this.dialogBindData.memo,
        description: this.goodDescribeBinData.description,
        mdescription: this.goodDescribeBinData.mdescription,
        packInfo: this.goodDescribeBinData.packInfo,
        afterSaleInfo: this.goodDescribeBinData.afterSaleInfo,
        itemCatIds: this.goodClassBinData,
        picUrls: this.goodImgBinData,
        defaultPicUrl: this.defaultPicUrl,
        itemVideoPics: this.itemVideoPics,
        itemIds: this.goodAssocBinData,
        noPropVos: this.skuRadionData,
        // 一良新增
        itemType: 0,
        isDistribution: this.dialogBindData.isDistribution,
        serialNumber: this.dialogBindData.serialNumber,
        freight: this.dialogBindData.freight
      }
      if (this.getUser().sellerId === null) {
        if (this.editorData === undefined || this.editorData === null) {
          param.itemSource = 0
          param.sellerId = '0'
        } else {
          if (this.editorData.sellerId === '0') {
            param.itemSource = 0
            param.sellerId = '0'
          } else {
            param.itemSource = 1
            param.sellerId = this.editorData.sellerId
          }
        }
      } else {
        param.itemSource = 1
        param.sellerId = this.getUser().sellerId
      }
      if (this.type === 2) {
        param.itemId = this.editorData.itemId
      }
      if (this.isYesorNo === 'yes') {
        if (this.skuYesArr[0] === undefined) {
          this.$message({
            message: '请选择销售属性',
            type: 'warning'
          })
          return false
        }
        param.skuVos = this.skuYesArr
        param.isUsedSalesProp = this.skuYesArr[0].isUsedSalesProp
      } else if (this.isYesorNo === 'no') {
        param.sku = this.goodSkuBinData.sku
        param.isUsedSalesProp = this.goodSkuBinData.isUsedSalesProp
      }
      if (this.type === 1) {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        commodity.addCommodityList(param).then(res => {
          loading.close()
          if (res.data.code !== 1) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.buttonState = false
            return false
          }
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res.message
          })
          loading.close()
        })
      } else if (this.type === 2) {
        param.listStatus = 0
        param.censorStatus = 0
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        commodity.editorCommodityList(param).then(res => {
          loading.close()
          if (res.data.code !== 1) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.buttonState = false
            return false
          }
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res.message
          })
          loading.close()
        })
      }
    },
    // 商品信息
    goodsinforType(type) {
      if (type[0] === 'goodsinfor') {
        this.goodsinforSubmit = type[1]
        this.dialogBindData = type[2]
      }
    },
    // 商品分类
    goodclass(array) {
      this.goodClassBinData = array
    },
    // 商品描述
    gooddescribefun(data) {
      this.goodDescribeBinData = data
    },
    // SKU信息
    skuinforType(type) {
      if (type[0] === 'skuinfor') {
        this.skuinforSubmit = type[1]
        this.goodSkuBinData = type[2]
        this.isYesorNo = type[4]
        const skuRadio = []
        for (const val of type[3]) {
          if (val.radiosValues !== '') {
            const obj = {}
            obj.propId = val.radiosValues.propId
            obj.optionId = val.radiosValues.optionId
            obj.optionValue = val.radiosValues.optionValue
            skuRadio.push(obj)
          }
        }
        this.skuRadionData = skuRadio
      } else if (type[0] === '') {
        this.skuYesArr = type[1]
        this.isYesorNo = type[3]
        var skuRadionew = []
        for (const val of type[2]) {
          if (val.radiosValues !== '') {
            const obj = {}
            obj.propId = val.radiosValues.propId
            obj.optionId = val.radiosValues.optionId
            obj.optionValue = val.radiosValues.optionValue
            skuRadionew.push(obj)
          }
        }
        this.skuRadionData = skuRadionew
      }
    },
    // 商品图片
    goodImg(data) {
      if (data === 'noImg') {
        this.defaultPicUrl = data
        this.itemVideoPics = data
        this.goodImgBinData = data
      } else {
        this.defaultPicUrl = data[0][0].url
        this.itemVideoPics = data[1]
        this.goodImgBinData = data[2]
      }
    },
    // 关联商品
    associatedgoodsData(data) {
      this.goodAssocBinData = data
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClose() {
      this.dialogState = false
    },
    goBack() {
      const flag = true;
      sessionStorage.setItem('flag', JSON.stringify(flag))
      if (this.type === 1) {
        this.$router.go(-1)
      } else {
        this.$router.push({
          name: '/v1/commodity',
          params: {
            search: true
          }
        })
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss">
  .tabStyle{
    .el-tabs__nav-wrap{
      padding: 0 20px;
    }
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .listName{
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
